<template>
	<NavBar :obj="{ title: '提现记录', color: '#000', backgroundColor: '#fff' }" />
	<up-sticky>
		<view class="tabs">
			<up-tabs
				:list="condition"
				@click="conditionCah"
				:scrollable="false"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:lineColor="theme?.themeColor"
			></up-tabs>
		</view>
	</up-sticky>
	<view class="container">
		<view class="fill">
			<view class="item flex items-center justify-between" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view class="intro">{{ item.mode}}</view>
					<view class="time">{{ item.create_time }}</view>
				</view>
				<view class="right flex flex-col items-end justify-end">
					<view class="intro">- ￥{{item.amount}}</view>
					<view class="time">{{ item.status_name }}<text style="color: red;margin-left: 5rpx;" v-if="item.reject_msg">({{ item.reject_msg }})</text></view>
				</view>
			</view>

		</view>
		
		
		<up-empty v-if="!list.length" icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无" />
		
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { port, goUrl } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	
	const theme = useThemeStore();
	
	
	const list = ref([]);
	const title = ref('');

	const listRef = ref({
		page: 1,
		status: ''
	});

	const condition = reactive([
		{ name: '全部', val: '' },
		{ name: '待审核', val: 1 },
		{ name: '已通过', val: 2 },
		{ name: '已驳回', val: 3 }
	]);



	function conditionCah(e) {
		listRef.value.status = e.val;
		listRef.value.page = 1;
		list.value.length = 0;
		getDrawRecord();
	}

	onShow(() => {
		listRef.value.page = 1;
		list.value.length = 0;
		getDrawRecord();
	});

	onReachBottom(() => {
		getDrawRecord();
	});

	async function getDrawRecord() {
		let res = await port('getDrawRecord', listRef.value);
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.tabs {
		background-color: #fff;
	}
	.container {
		.fill {
			margin-top: 24rpx;
			padding: 0 30rpx;
			background-color: #fff;
			.item {
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eeeeee;
				&:last-child {
					border-bottom: none;
				}
				.left {
					.intro {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
					}
					.time {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-top: 21rpx;
					}
				}
				.right {
					.intro {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
					}
					.time {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-top: 21rpx;
					}
				}
			}
		}
	}
</style>
